<script setup>
import {ref,reactive,onMounted} from "vue"
import myAxios from "../utils/axios";
import {schedulePiniaStore} from "../store/scheduleStore"
import {ElMessage,ElMessageBox} from "element-plus"

let schedulePinia = schedulePiniaStore();
// let scheduleList = reactive([])

let loadData = async() =>{
  // let {data} = await myAxios.get("/schedule/list"); 
  let { data } = await myAxios.get(`/schedule/page/${pageInfo.currentPage}/${pageInfo.pageSize}`);
    // scheduleList = data.data
    // console.log(scheduleList);
    schedulePinia.scheduleList = data.data;
    //分页又在外面多包了一层page
    //records是分页查到的数据
    schedulePinia.scheduleList = data.data.records;
   total.value = data.data.total;
    
    }

//钩子函数：可以自己一来就调用把内容查出来
onMounted(()=>{
    loadData();
})



let remove = async(sid) =>{
   ElMessageBox.confirm("是否删除？",{type:'warning',confirmButtonText:"确定吗",cancelButtonText:"取消不"}).then(async()=>{
    let {data} = await myAxios.delete(`/schedule/remove/${sid}`)
            if(data.code == 200){
                // alert("删除成功")
                //消息提示
                ElMessage.success("删除成功")
                loadData();
            }
   }).catch((err)=>{
        ElMessage.error("删除失败")
   })
}


//分页的响应式对象
let pageInfo=reactive({
    currentPage:1,
    pageSize:3
})

//总行数
let total = ref(0)

//改页面大小
//不写（），获得事件和数据的绑定
let handleSizeChange=(val)=>{
    pageInfo.pageSize=val;
    loadData();
}

//改页码
let handleCurrentChange = (val)=>{
    pageInfo.currentPage=val;
    loadData();
}

//控制对话框的隐藏显示
let dialogFormVisible = ref(false)

//添加显示窗口
let showAdd=()=>{
  //删除添加框里面的缓存
  reset();
  dialogFormVisible.value = true;
 
}
//每次添加清空里面的缓存
let reset = ()=>{
  scheduleInfo.sid = null,
  scheduleInfo.title = '',
  scheduleInfo.completed = 0;
}

//保存添加修改的响应式对象
let scheduleInfo = reactive({
    sid:null,
    uid:2,
    title:"",
    completed:0
})

//判断是添加或者修改，就是因为回显的时候传回了一行数据，有sid
let saveOrUpdate=async()=>{
  let {data} =await myAxios.post("/schedule/saveOrUpdate",scheduleInfo);
    if(data.code==200){
        // alert("操作成功！");
        ElMessage.success("操作成功！")
        //关闭对话框
        dialogFormVisible.value = false;
        loadData();
    }
}

//显示修改窗口
let showUpdate =(schedule)=>{
  dialogFormVisible.value = true;
  //修改，放入里面之后就可以展示渲染到页面上实现渲染效果
  Object.assign(scheduleInfo,schedule)
}

</script>
<template>
  <div>

    <el-dialog v-model="dialogFormVisible" title="添加|修改" width="500">
    <el-form :model="scheduleInfo">
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="scheduleInfo.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="进度" :label-width="formLabelWidth">
                <el-radio-group v-model="scheduleInfo.completed">
                    <el-radio :value="0">未完成</el-radio>
                    <el-radio :value="1">已完成</el-radio>
                </el-radio-group>
            </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


    <h3 class="ht">您的日程如下</h3>
    <el-button type="success" @click="showAdd()">添加日程</el-button>
    <!--<el-table隐式迭代，自动循环遍历  -->
    <!--  scope.row: 获取集合数据中的每一行对象 (一个schedule对象) -->
    <el-table :data="schedulePinia.scheduleList" style="width: 100%">
    <el-table-column label="编号" width="380">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.$index +1 }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="内容" width="680">
      <template #default="scope">
        {{ scope.row.title }}
      </template>
    </el-table-column>
    <el-table-column label="进度" width="580">
      <template #default="scope">
        {{ scope.row.completed == 0? "未完成":"已完成"}}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="280">
      <template #default="scope">
        <el-button size="small" @click="showUpdate(scope.row)">
          修改
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="remove(scope.row.sid)"
        >
         删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[1, 2, 3, 4]"
      
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<style scoped>
      .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 80%;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;

        }
        .ipt{
            border: 0px;
            width: 50%;

        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:100px;
            background-color: antiquewhite;

        }
        #usernameMsg , #userPwdMsg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style>